import { useState, Suspense, useEffect } from "react";
import {
    SketchOutlined,
    HomeOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    SettingOutlined,
    MoneyCollectOutlined,
    ProfileOutlined,
    BarChartOutlined,
    AppstoreAddOutlined,
    ShoppingCartOutlined,
    UserSwitchOutlined,
    BlockOutlined,
    AlignRightOutlined,
    FormOutlined,
    SmileOutlined
} from '@ant-design/icons';
import { Layout, Menu, Button, theme, Dropdown, Modal, Form, Input } from 'antd';
import './index.scss'
import { useNavigate, Link } from 'react-router-dom';
import { Outlet } from 'react-router-dom';
import type { MenuProps } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import service from '../../api';
const { Header, Sider, Content } = Layout;
const Index = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    let items: MenuProps['items'] = [
        {
            key: '1',
            label: '设置'
        }, {
            key: '2',
            label: <Link to='/login'>退出</Link>
        }
    ]
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    var history = useNavigate()
    var dispatch = useDispatch()
    var handleRouter = ({ key, keyPath }: any) => {
        history(key)
    }
    var handleExit = (e: any) => {
        if (e.key === '2') {
            dispatch({ type: 'REMOVE_LOGININFO' })
        } else {
            setIsModalOpen(true);
        }
    }
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    var onFinish = async (values: any) => {

        var res = await service.cxl.modifyPassword(values)
        console.log(values, res);
        setIsModalOpen(false);
    }
    return (
        <div className='index'>
            <Modal title="修改密码" open={isModalOpen} footer={null}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}

                >
                    <Form.Item
                        label="用户名"
                        name="userName"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="原始密码"
                        name="originalPassword"
                        rules={[{ required: true, message: '请输入原始密码!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="新密码"
                        name="newPassword"
                        rules={[{ required: true, message: '请输入新密码!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="确认密码"
                        name="verifyPassword"
                        rules={[{ required: true, message: '请再次输入新密码!' }]}
                    >
                        <Input />
                    </Form.Item>


                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button htmlType="button" onClick={handleCancel}>
                            取消
                        </Button>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>

                    </Form.Item>
                </Form>
            </Modal>
            <Layout >
                <Sider trigger={null} collapsible collapsed={collapsed} style={{

                }}>
                    <div className={`logo ${collapsed ? 'hide' : ''}`} >
                        <SketchOutlined className='iconlogo' />管理控制台</div>
                    <Menu
                        style={{

                        }}
                        onClick={handleRouter}
                        theme="dark"
                        mode="inline"
                        defaultSelectedKeys={['/index/home']}
                        items={[
                            {
                                key: '/index/home',
                                icon: <HomeOutlined />,
                                label: '首页',

                            },
                            {
                                key: '/index/store',
                                icon: <AppstoreAddOutlined />,
                                label: '仓库管理',
                                children: [
                                    {
                                        key: '/index/store/enter',
                                        label: '入库管理',
                                    },
                                    {
                                        key: '/index/store/out',
                                        label: '出库管理',
                                    }
                                ],
                            },
                            {
                                key: '/index/procure',
                                icon: <ShoppingCartOutlined />,
                                label: '采购管理',
                                children: [
                                    {
                                        key: '/index/procure/need',
                                        label: '需求单',
                                    },
                                    {
                                        key: '/index/procure/allocation',
                                        label: '分配需求单',
                                    },
                                    {
                                        key: '/index/procure/procureList',
                                        label: '采购单',
                                    },
                                ],
                            },
                            {
                                key: '/index/sale',
                                icon: <BarChartOutlined />,
                                label: '销售管理',
                                children: [
                                    {
                                        key: '/index/sale/selectgoods',
                                        label: '选货单管理',
                                    },
                                    {
                                        key: '/index/sale/pack',
                                        label: '打包单管理',
                                    },
                                    {
                                        key: '/index/sale/accounts',
                                        label: '结算单管理',
                                    },
                                ],
                            },
                            {
                                key: '/index/finance',
                                icon: <MoneyCollectOutlined />,
                                label: '财务管理',
                                children: [
                                    {
                                        key:'/index/finance/recharge',
                                        label:'客户充值管理'
                                    },
                                    {
                                        key:'/index/finance/account',
                                        label:'客户账户管理'
                                    },
                                    {
                                        key:'/index/finance/bill',
                                        label:'客户账单管理'
                                    },

                                ],
                            },
                            {
                                key: '/index/pro',
                                icon: <ProfileOutlined />,
                                label: '商品管理',
                                children: [
                                  {
                                    key: "/index/pro/proment",
                                    label: "产品管理",
                                  },
                                  {
                                    key: "/index/pro/profocus",
                                    label: "产品关注",
                                  },
                                ],
                            },
                            {
                                key: '/index/cooperate',
                                icon: <BlockOutlined />,
                                label: '合作关系',
                                children: [
                                  {
                                    key: "/index/cooperate/cusment",
                                    label: "客户管理",
                                  },
                                  {
                                    key: "/index/cooperate/salment",
                                    label: "业务员管理",
                                  },
                                  {
                                    key: "/index/cooperate/supment",
                                    label: "供应商管理",
                                  },
                                  {
                                    key: "/index/cooperate/folfriends",
                                    label: "关注友商",
                                  },
                                ],
                            },
                            {
                                key: '/index/data',
                                icon: <AlignRightOutlined />,
                                label: '数据管理',
                                children: [
                                    {
                                        key: '/index/data/region',
                                        label: '区域管理',
                                    },
                                    {
                                        key: '/index/data/sort',
                                        label: '物料分类',
                                    },
                                    {
                                        key: '/index/data/category',
                                        label: '品类管理',
                                    },
                                    {
                                        key: '/index/data/productLine',
                                        label: '产品线管理',
                                    },
                                ],
                            },
                            {
                                key: '/index/form',
                                icon: <FormOutlined />,
                                label: '表单管理',
                                children: [
                                    {
                                        key: '/index/form/attribute',
                                        label: '属性管理',
                                    },
                                    {
                                        key: '/index/form/Menu',
                                        label: '菜单管理',
                                    },
                                ],
                            },

                            {
                                key: '/index/system',
                                icon: <SettingOutlined />,
                                label: '系统管理',
                                children: [
                                    {
                                        key: '/index/system/UserRegulate',
                                        label: '用户管理'
                                    },
                                    {
                                        key: '/index/system/RoleManagement',
                                        label: '角色流程'
                                    },
                                    {
                                        key: '/index/system/StoreManagement',
                                        label: '仓库管理'
                                    },
                                ],
                            },

                            {
                                key: '/index/vip',
                                icon: <SmileOutlined />,
                                label: '会员管理',
                                children: [
                                    {
                                        key: '/index/Vip/TenantManagement',
                                        label: '租户管理'
                                    },
                                ],
                            },
                        ]}
                    />
                </Sider>
                <Layout>
                    <Header className='header' style={{
                        background: '#fff'
                    }}>
                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => setCollapsed(!collapsed)}
                            style={{

                                fontSize: '16px',
                                width: 64,
                                height: 64,
                            }}
                        />
                        <span>西安GG bond信息有限公司</span>
                        <span>GG bond
                            <span className='icon'>
                                <Dropdown menu={{ items, onClick: handleExit }} placement="bottom">
                                    <UserSwitchOutlined />
                                </Dropdown></span>
                        </span>

                    </Header>
                    <Content
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                            background: colorBgContainer,
                        }}
                    >

                        <Suspense fallback={<div>loading...</div >}>
                            <Outlet />
                        </Suspense>

                    </Content>
                </Layout>
            </Layout>
        </div >
    );
}

export default Index;








